<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image gallery</title>
	<link rel="stylesheet" href="styles/layout.css" media="screen"/>
</head>
<body>
    <h1>Snapshots</h1>
<ul>
    <li>
        <a href="images/highlander.jpg" title="highlander display" onclick="showPic(this);return false;">highlander</a>
    </li>
    <li>
        <a href="images/prado.jpg" title="prado display" onclick="showPic(this);return false;">prado</a>
    </li>
    <li>
        <a href="images/picOne.jpg" title="picOne display" onclick="showPic(this);return false;">picOne</a>
    </li>
    <li>
        <a href="images/picTwo.jpg" title="picTwo display" onclick="showPic(this);return false;">picTwo</a>
    </li>
</ul>
<img id="placeholder" src="images/default.jpg" alt="my img gallery"/> 
<p id="description">Choose an image.</P>
<script type="text/javascript" src="scripts/showPic.js"></script>
</body>
</html>